﻿1.ng-blur
<window, input, select, textarea, a
         ng-blur="expression">
    ...
</window,>

2.ng-change
<script>
    angular.module('changeExample', [])
      .controller('ExampleController', ['$scope', function ($scope) {
          $scope.counter = 0;
          $scope.change = function () {
              $scope.counter++;
          };
      }]);
</script>
<div ng-controller="ExampleController">
    <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
    <input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
    <label for="ng-change-example2">Confirmed</label><br />
    <tt>debug = {{confirmed}}</tt><br />
    <tt>counter = {{counter}}</tt><br />
</div>

3.ng-checked
<label>Check me to check both: <input type="checkbox" ng-model="master"></label><br />
<input id="checkSlave" type="checkbox" ng-checked="master" aria-label="Slave input">

4.ng-class
<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
<label>
    <input type="checkbox" ng-model="deleted">
    deleted (apply "strike" class)
</label><br>
<label>
    <input type="checkbox" ng-model="important">
    important (apply "bold" class)
</label><br>
<label>
    <input type="checkbox" ng-model="error">
    error (apply "has-error" class)
</label>
<hr>
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style"
       placeholder="Type: bold strike red" aria-label="Type: bold strike red">
<hr>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1"
       placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"><br>
<input ng-model="style2"
       placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"><br>
<input ng-model="style3"
       placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3"><br>
<hr>
<p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p>
<input ng-model="style4" placeholder="Type: bold, strike" aria-label="Type: bold, strike"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

5.ng-class-even
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
    <li ng-repeat="name in names">
        <span ng-class-odd="'odd'" ng-class-even="'even'">
            {{name}} &nbsp; &nbsp; &nbsp;
        </span>
    </li>
</ol>

6.ng-class-odd
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
    <li ng-repeat="name in names">
        <span ng-class-odd="'odd'" ng-class-even="'even'">
            {{name}}
        </span>
    </li>
</ol>

7. ng-cloak

<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" class="ng-cloak">{{ 'world' }}</div>

8.ng-copy
<input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">
copied: {{copied}}

9.ng-cut
<input ng-cut="cut=true" ng-init="cut=false; value='cut me'" ng-model="value">
cut: {{cut}}

10.ng-dblclick
<button ng-dblclick="count = count + 1" ng-init="count=0">
    Increment (on double click)
</button>
count: {{count}}

11.ng-disabled
<label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br />
<button ng-model="button" ng-disabled="checked">Button</button>

12.ng-focus

13. ng-show ng-hide
Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"><br />
<div>
    Show:
    <div class="check-element animate-hide" ng-show="checked">
        <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
    </div>
</div>
<div>
    Hide:
    <div class="check-element animate-hide" ng-hide="checked">
        <span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
    </div>
</div>

14. ng-model-options
<div ng-controller="ExampleController">
    <form name="userForm">
        <label>
            Name:
            <input type="text" name="userName"
                   ng-model="user.name"
                   ng-model-options="{ updateOn: 'blur' }"
                   ng-keyup="cancel($event)"/>
        </label><br/>
        <label>
            Other data:
            <input type="text" ng-model="user.data"/>
        </label><br/>
    </form>
    <pre>user.name = <span ng-bind="user.name"></span></pre>
</div>

15.ng-mouseenter
<button ng-mouseenter="count = count + 1" ng-init="count=0">
    Increment (when mouse enters)
</button>
count: {{count}}

16.ng-mouseleave
<button ng-mouseleave="count = count + 1" ng-init="count=0">
    Increment (when mouse leaves)
</button>
count: {{count}}

17. ng-mouseove
<button ng-mousemove="count = count + 1" ng-init="count=0">
    Increment (when mouse moves)
</button>
count: {{count}}

18. ng-mouseover
<button ng-mouseover="count = count + 1" ng-init="count=0">
    Increment (when mouse is over)
</button>
count: {{count}}

19.ng-options
<script>
    angular.module('selectExample', [])
      .controller('ExampleController', ['$scope', function ($scope) {
          $scope.colors = [
            { name: 'black', shade: 'dark' },
            { name: 'white', shade: 'light', notAnOption: true },
            { name: 'red', shade: 'dark' },
            { name: 'blue', shade: 'dark', notAnOption: true },
            { name: 'yellow', shade: 'light', notAnOption: false }
          ];
          $scope.myColor = $scope.colors[2]; // red
      }]);
</script>
<div ng-controller="ExampleController">
    <ul>
        <li ng-repeat="color in colors">
            <label>Name: <input ng-model="color.name"></label>
            <label><input type="checkbox" ng-model="color.notAnOption"> Disabled?</label>
            <button ng-click="colors.splice($index, 1)" aria-label="Remove">X</button>
        </li>
        <li>
            <button ng-click="colors.push({})">add</button>
        </li>
    </ul>
    <hr/>
    <label>
        Color (null not allowed):
        <select ng-model="myColor" ng-options="color.name for color in colors"></select>
    </label><br/>
    <label>
        Color (null allowed):
        <span class="nullable">
            <select ng-model="myColor" ng-options="color.name for color in colors">
                <option value="">-- choose color --</option>
            </select>
        </span>
    </label><br/>

    <label>
        Color grouped by shade:
        <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors"></select>
    </label><br/>

    <label>
        Color grouped by shade, with some disabled:
        <select ng-model="myColor"
                ng-options="color.name group by color.shade disable when color.notAnOption for color in colors"></select>
    </label><br/>



    Select <button ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</button>.
    <br/>
    <hr/>
    Currently selected: {{ {selected_color:myColor} }}
    <div style="border: solid 1px black; height: 20px"
         ng-style="{'background-color':myColor.name}">
    </div>
</div>

20. ng-repeate
Variable	Type	Details
$index	number	iterator offset of the repeated element (0..length-1)
$first	boolean	true if the repeated element is first in the iterator.
$middle	boolean	true if the repeated element is between the first and last in the iterator.
$last	boolean	true if the repeated element is last in the iterator.
$even	boolean	true if the iterator position $index is even (otherwise false).
$odd boolean true if the iterator position $index is odd (otherwise false).

or example, you may track items by the index of each item in the collection, using the special scope property $index:

<div ng-repeat="n in [42, 42, 43, 43] track by $index">
    {{n}}
</div>
You may use arbitrary expressions in track by, including references to custom functions on the scope:

<div ng-repeat="n in [42, 42, 43, 43] track by myTrackingFunction(n)">
    {{n}}
</div>
If you are working with objects that have an identifier property, you can track by the identifier instead of the whole object. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones:

<div ng-repeat="model in collection track by model.id">
    {{model.name}}
</div>
When no track by expression is provided, it is equivalent to tracking by the built-in $id function, which tracks items by their identity:

<div ng-repeat="obj in collection track by $id(obj)">
    {{obj.prop}}
</div>
Note: track by must always be the last expression:
<div ng-repeat="model in collection | orderBy: 'id' as filtered_result track by model.id">
    {{model.name}}
</div>

21.ng-selected
<label>Check me to select: <input type="checkbox" ng-model="selected"></label><br />
<select aria-label="ngSelected demo">
    <option>Hello!</option>
    <option id="greet" ng-selected="selected">Greetings!</option>
</select>